<template>
  <div class="f-all">
    <div class="f-zi">后台管理者</div>
    <div class="f-table">
      <div class="f-one">
        <el-form
          :inline="true"
          :model="Form"
          ref="Form"
          label-width="75px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名:" prop="admin_account">
            <el-input
              type="admin_account"
              v-model="Form.admin_account"
              autocomplete="off"
              class="padding"
            ></el-input>
          </el-form-item>
          <el-form-item label="人员姓名:" prop="people_name">
            <el-input
              type="people_name"
              v-model="Form.people_name"
              autocomplete="off"
               class="padding"
            ></el-input>
          </el-form-item>
          <el-form-item label="角色名:" prop="role_id">
            <!-- 设置disabled禁用 -->
            <el-select v-model="Form.role_id" placeholder="请选择">
              <el-option
                v-for="item in downinput"
                :key="item.admin_id"
                :label="item.role_name"
                :value="item.role_id"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- <br> -->
          <el-form-item label="开始时间:" prop="begintime">
            <el-date-picker
              v-model="Form.begintime"
              type="date"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>

          <el-form-item label="结束时间:" prop="endtime" class="f-jieshu">
            <el-date-picker
              v-model="Form.endtime"
              type="date"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <div class="f-btn">
            <div class="f-two">
              <el-form-item>
                <el-button type="primary" @click="submitForm('Form')"
                  >搜索</el-button
                >
                <el-button @click="resetForm('Form')">重置</el-button>
              </el-form-item>
            </div>
            <div>
              <el-form-item>
                <el-button type="primary" @click="newAddPage()">新增</el-button>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </div>
      <div class="f-three">
        <el-table
          ref="singleTable"
          :data="currList"
          highlight-current-row
          @current-change="handleCurrentChange"
          style="width: 100%"
          border
          :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
        >
          <el-table-column
            type="index"
            label="序号"
            width="50"
            align="center"
          ></el-table-column>
          <!-- <el-table-column property="date" label="序号" width="120"></el-table-column> -->
          <el-table-column
            prop="admin_account"
            label="管理员账号"
            width="100"
            align="center"
          ></el-table-column>
          <!-- <el-table-column
            prop="admin_password"
            label="管理员密码"
            show-overflow-tooltip
            width="200"
            align="center"
          ></el-table-column> -->
          <el-table-column
            prop="build_role.role_name"
            label="角色名称"
            width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="buildPeople.people_name"
            label="人员姓名"
            width="100"
            align="center"
          ></el-table-column>
          <!-- <el-table-column prop="admin_lastloginstate" label="上次状态" width="100" align="center">
            
            <template slot-scope="scope">
              <span v-text="scope.row.admin_lastloginstate=='1'?'男':'女'"></span>
            </template>
          </el-table-column>-->
          <el-table-column
            property="admin_time"
            label="创建时间"
            align="center"
            width="100"
          ></el-table-column>
          <el-table-column
            property="admin_lastlogintime"
            label="上次登录时间"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            property="admin_lastloginstate"
            label="上次登录状态"
            align="center"
            width="100"
          >
            <template slot-scope="scope">
              <span
                v-text="
                  scope.row.admin_lastloginstate == '0' ? 'PC端' : 'APP端'
                "
              ></span>
            </template>
          </el-table-column>
          <el-table-column
            property="admin_remark"
            label="备注"
            align="center"
            width="70"
          ></el-table-column>
          <el-table-column
            property="admin_state"
            label="状态"
            align="center"
            width="70"
          >
            <template slot-scope="scope">
              <!-- <span v-text="scope.row.admin_lastloginstate=='0'?'启用':'禁用'"></span> -->
              <span
                class="el-icon-success"
                style="color: green"
                v-if="scope.row.admin_state == '0'"
              ></span>
              <span class="el-icon-error" style="color: red" v-else></span>
            </template>
          </el-table-column>
          <el-table-column property="do" label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="edit(scope.$index, scope.row)">
                <span class="btn-zi">编辑</span>
              </el-button>
              <el-button type="text" @click="inquire(scope.$index, scope.row)"
                >查询</el-button
              >
              <el-button
                type="text"
                @click="del(scope.$index, scope.row)"
                v-if="scope.row.role_id > '1'"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 编辑模态框 -->
        <el-dialog
          title="修改信息"
          :visible.sync="dialogFormVisible"
          width="680px"
        >
          <el-form :model="this.BJform" ref="updataForm">
            <el-row>
              <el-col :span="11">
                <el-form-item label="管理员ID:" :label-width="formLabelWidth">
                  <el-input
                    v-model="BJform.admin_id"
                    autocomplete="off"
                    :disabled="true"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item
                  label="管理员密码:"
                  :label-width="formLabelWidth"
                  prop="admin_password"
                >
                  <el-input
                    v-model="BJform.admin_password"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="11">
                <el-form-item
                  label="角色名:"
                  :label-width="formLabelWidth"
                  prop="role_id"
                >
                  <el-select
                    v-model="BJform.role_id"
                    placeholder="全部"
                    :disabled="BJform.admin_id == '1' ? true : false"
                  >
                    <el-option
                      v-for="item in downinput"
                      :key="item.role_id"
                      :label="item.role_name"
                      :value="item.role_id"
                      :disabled="item.role_name === '超级管理员' ? true : false"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="11">
                <el-form-item
                  label="管理员状态:"
                  :label-width="formLabelWidth"
                  prop="admin_state"
                >
                  <el-select
                    v-model="BJform.admin_state"
                    placeholder="全部"
                    :disabled="BJform.admin_id == '1' ? true : false"
                  >
                    <el-option
                      v-for="item in finput"
                      :key="item.admin_state"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-col :span="11">
              <el-form-item
                label="备注信息:"
                :label-width="formLabelWidth"
                prop="admin_remark"
              >
                <el-input
                  v-model="BJform.admin_remark"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="quaoxiao(BJform)">取 消</el-button>
            <el-button type="primary" @click="SureEdit('updataForm')"
              >确 定</el-button
            >
          </div>
        </el-dialog>

        <!-- 查询模态框 -->
        <el-dialog
          title="全部信息"
          :visible.sync="dialogTableVisible"
          width="980px"
        >
          <el-form :model="this.newBJform" ref="updataForm" :disabled="true">
            <!-- 第二行 -->
            <el-row>
              <el-col :span="8">
                <el-form-item label="管理员状态:" :label-width="formLabelWidth">
                  <el-input v-model="newBJform.admin_state" autocomplete="off">
                    <template slot-scope="scope">
                      <span
                        v-text="scope.row.admin_state == '0' ? '启用' : '禁用'"
                      ></span>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="人员ID:"
                  :label-width="formLabelWidth"
                  prop="admin_password"
                >
                  <el-input
                    v-model="newBJform.people_id"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="角色ID:"
                  :label-width="formLabelWidth"
                  prop="admin_password"
                >
                  <el-input
                    v-model="newBJform.role_id"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="管理员ID:" :label-width="formLabelWidth">
                  <el-input
                    v-model="newBJform.admin_id"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="管理员账号:"
                  :label-width="formLabelWidth"
                  prop="admin_password"
                >
                  <el-input
                    v-model="newBJform.admin_account"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="管理员密码:"
                  :label-width="formLabelWidth"
                  prop="admin_password"
                >
                  <el-input
                    v-model="newBJform.admin_password"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第三行 -->
            <el-row>
              <el-col :span="8">
                <el-form-item label="上次状态:" :label-width="formLabelWidth">
                  <el-input
                    v-model="newBJform.admin_lastloginstate"
                    autocomplete="off"
                  >
                    <template slot-scope="scope">
                      <span
                        v-text="
                          scope.row.admin_lastloginstate == '0'
                            ? 'PC端'
                            : 'APP端'
                        "
                      ></span>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="上次登录时间:"
                  :label-width="formLabelWidth"
                  prop="admin_password"
                >
                  <el-input
                    v-model="newBJform.admin_lastlogintime"
                    autocomplete="off"
                    prop="admin_password"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="注册时间:"
                  :label-width="formLabelWidth"
                  prop="admin_password"
                >
                  <el-input
                    v-model="newBJform.admin_time"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-col :span="11">
              <el-form-item
                label="备注信息:"
                :label-width="formLabelWidth"
                prop="admin_remark"
              >
                <el-input
                  v-model="newBJform.admin_remark"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogTableVisible = false">取 消</el-button>
            <el-button type="primary" @click="SearchSure('updataForm')"
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </div>
    </div>
    <div class="f-block">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="tableData.length"
        :page-size="pageSize"
        @current-change="changePage"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import http from "../api";
import axios from "axios";
export default {
  data() {
    return {
      finput: [
        {
          value: 0,
          label: "启用",
        },
        {
          value: 1,
          label: "禁用",
        },
      ],
      // 查询form

      // 下拉框
      downinput: [],
      // input框的值
      Form: {
        admin_account: "",
        people_name: "",
        role_id: "",
        data: "",
        // 日历
        begintime: "",
        value2: "",
      },
      // 表格
      // shebei: {
      //   sheName: "",
      // },
      tableData: [], //总条数
      // 分页
      currPage: "", //当前页
      currList: [], //当前展示的数据数组
      pageSize: 7,
      newData: [],
      fadd: [],

      // 编辑模态框框的值
      dialogTableVisible: false,
      dialogFormVisible: false,
      BJform: {
        // 编辑
        admin_id: "",
        admin_password: "",
        role_id: "",
        admin_remark: "",
        admin_state: "",
      },
      newBJform: {
        admin_id: "",
        admin_password: "",
        role_id: "",
        admin_remark: "",
        admin_state: "",
        // 查询
        admin_account: "",
        admin_lastloginstate: "",
        admin_lastlogintime: "",
        admin_time: "",
        people_id: "",
      },
      formLabelWidth: "120px",
    };
  },
  mounted() {
    // 权限 http.goit
    http.goit({}).then((r) => {
      if (r.code == 2) {
        alert("权限不足");
        this.$router.push({
          name:"控制台"
        })
      } else {
        console.log(r);
        this.tableData = r.data;
        this.setCurrList(1);
      }
    });
    // 页面直接获取userAdmin数据
    console.log(window.sessionStorage.getItem("userToken"));
    // 直接获取表
    http.userAdmin({}).then((r) => {
      if (r.code == 2) {
        alert("权限不足");
      } else {
        console.log(r);
        this.tableData = r.data;
        this.setCurrList(1);
      }
    });
    // 获取下拉框
    http.bottomInput({}).then((r) => {
      console.log(r);
      this.downinput = r.data;
      console.log(this.downinput);
    });
  },
  methods: {
    // 编辑里的确定按钮
    SureEdit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.dialogFormVisible = false;
          http.FEdit(this.BJform).then((r) => {
            console.log("这是编辑的", r);
            http.userAdmin({}).then((res) => {
              this.tableData = res.data;
              this.setCurrList(1);
              // 点确定后让表清空
              //  this.BJform=[]
            });
          });
        } else {
          this.$message({
            showClose: true,
            message: "修改失败",
            type: "error",
          });
          return false;
        }
      });
    },
    // 编辑里的取消按钮
    quaoxiao(BJform) {
      console.log(BJform);
      this.dialogFormVisible = false;
      // 点取消后清空
      for (let key in BJform) {
        BJform[key] = "";
      }
      // this.BJform = [];
    },
    // 编辑
    edit(index, row) {
      this.dialogFormVisible = true;
      console.log(row.role_id);
      this.BJform.admin_id = row.admin_id;
      // this.BJform.admin_state=row.admin_state
    },
    // 新增按钮
    newAddPage() {
      this.$router.push({
        name: "后台新增页面",
      });
    },
    // 查询
    inquire(index, row) {
      console.log("查询的", row);
      this.dialogTableVisible = true;
      this.newBJform.admin_id = row.admin_id;
      console.log(this.newBJform.admin_id);
      this.newBJform.admin_password = row.admin_password;
      this.newBJform.role_id = row.role_id;
      this.newBJform.admin_remark = row.admin_remark;
      this.newBJform.admin_state = row.admin_state;
      // 查询
      this.newBJform.admin_account = row.admin_account;
      this.newBJform.admin_lastloginstate = row.admin_lastloginstate;
      this.newBJform.admin_lastlogintime = row.admin_lastlogintime;
      this.newBJform.admin_time = row.admin_time;
      this.newBJform.people_id = row.people_id;
      // this.$router.push({
      //   name: "查询",
      //   params: row,
      // });
    },
    // 查询的确定按钮
    SearchSure() {
      this.dialogTableVisible = false;
    },
    // 提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          http.userSearch(this.Form).then((r) => {
            console.log(r);
            this.tableData = r.data;
            this.setCurrList(1);
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 删除
    del(index, row) {
      http.DelUser(row).then((r) => {
        http.userAdmin({}).then((res) => {
          this.tableData = res.data;
          this.setCurrList(1);
        });
        alert(r.msg);
      });
    },
    // 分页
    setCurrList(index) {
      console.log("当前页", index);
      // console.log(this.currPage.length)
      this.currList = this.tableData.slice(
        (index - 1) * this.pageSize,
        index * this.pageSize
      );
    },
    changePage(val) {
      this.currPage = val;
      this.setCurrList(val);
      console.log(val);
    },
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
      console.log(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
      console.log(val);
    },

    handleSelectionChange(val) {
      console.log(val);
      this.newData = val;
      console.log(this.newData);
    },
    // add() {
    //   console.log(this.newData);
    //   //   this.fadd = rows;
    //   //   console.log(rows);
    // },
  },
};
</script>
<style scoped>
.f-all {
  margin-top: 15px;
  width: 100%;
  /* width: 1300px; */
  height: 645px;
  background-color: white;
  overflow-y: scroll;
  position: relative;
}
.f-zi {
  margin-top: 20px;
  font-size: 17px;
  color: #222;
  font-weight: 700;
  margin-left: 15px;
}
.f-one {
  width: 100%;
  /* background-color: wheat; */
  display: flex;
}
/* 两个按钮 */
.f-two {
  /* margin-left: 20px; */
}
.f-table {
  /* margin-left: 15px; */
  /* margin-top: 10px; */
  margin: 0 auto;
  width: 98%;
}
.f-block {
  position: absolute;
  bottom: 10px;
  right: 2%;
  /* margin-left: 80%;
  margin-top: 15px; */
}
/* 结束日期样式 */
.f-jieshu {
  margin-left: 13px;
  /* padding-left: 10px; */
}
/* 按钮位置 */
.f-btn {
  width: 97%;
  display: flex;
  margin: 0 auto;
  justify-content: space-between;
  /* background: pink; */
  /* margin-left: 80%; */
}
/* 表格 */
.f-three {
  width: 97%;
  margin: 0 auto;
  /* margin-left: 20px; */
}
/* input框 */
.el-input >>> .el-input__inner {
  width: 185px;
  height: 30px;
 
}
.padding >>> .el-input__inner {
  width: 178px;
  height: 30px;
  padding-left: 5px !important;
}
.el-select >>> .el-input__inner {
  width: 178px;
  height: 30px;
  padding-left: 5px;
  /* margin-left: 5px; */
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 185px;
  /* padding-left: -10px; */
  /* margin-left: 10px; */
}
.demo-ruleForm {
  /* display: flex; */
}
.el-select >>> .el-input__inner {
  width: 185px;
  height: 30px;
  padding-left: 8px;
  /* margin-left: 5px; */
}
/* 按钮 */
.el-button {
  height: 32px;
  padding: 5px 15px;
}
/* 日历 */
.el-range-editor >>> .el-input__inne {
  /* width: 500px; */
  /* padding-left: 10px; */
}
.el-form-item {
  margin-bottom: 5px;
}
</style>